<script setup lang="ts">
import {
  Drawer,
  Form,
  FormItem,
  Row,
  Col,
  Input,
  Button,
  RadioGroup,
  RadioButton,
  TreeSelect,
  message,
} from "ant-design-vue";
import { reactive, ref, toRaw } from "vue";
import { companySelectApi } from "@/api/System/company";
import type { Rule } from "ant-design-vue/es/form";

const formRef = ref();
// 定义状态
const state = reactive({
  visible: false,
  type: "",
  title: "新增",
});
const onClose = () => {
  state.visible = false;
};
const useForm = Form.useForm;
const optionsMenu = ref([]);
let modelStateRef = reactive({
  parentId: "",
  name: "",
  sort: "",
  username: "",
  phone: "",
  email: "",
  status: "",
});
const rules: Record<string, Rule[]> = {
  parentId: [
    {
      required: true,
      message: "请选择上级组织",
      trigger: "change",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入部门名称",
      trigger: "change",
    },
  ],
};
const { resetFields } = useForm(modelStateRef);
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      message.success("提交成功");
      onClose();
      console.log("values", modelStateRef, toRaw(modelStateRef));
    })
    .catch((error: any) => {
      console.log("error", error);
    });
};

const getMenuList = async () => {
  const { data } = await companySelectApi();
  optionsMenu.value = data;
};
const open = (type: any, title: any, row: any) => {
  state.title = title;
  state.type = type;
  if (row && type === "edit") {
    modelStateRef.name = row.name;
    modelStateRef.parentId = row.id;
    modelStateRef.sort = row.sort;
    modelStateRef.username = row.cousernamede;
    modelStateRef.phone = row.phone;
    modelStateRef.email = row.email;
    modelStateRef.status = row.status;
    if (row && type === "addSon") {
      modelStateRef.parentId = row.id;
    }
  }
  state.visible = true;
  getMenuList();
};

// 导出给父组件调用
defineExpose({
  open,
});
</script>
<template>
  <Drawer
    width="800px"
    v-model:open="state.visible"
    :title="state.title"
    @close="resetFields"
    destroyOnClose
  >
    <Form
      ref="formRef"
      :model="modelStateRef"
      :labelCol="{ style: 'width: 100px' }"
      :rules="rules"
    >
      <Row>
        <Col :span="24">
          <FormItem label="上级部门" name="parentId">
            <TreeSelect
              v-model:value="modelStateRef.parentId"
              placeholder="请选择部门"
              :fieldNames="{ value: 'id', label: 'name' }"
              :treeData="optionsMenu"
            /> </FormItem
        ></Col>
        <Col :span="24">
          <FormItem label="部门名称" name="name">
            <Input
              v-model:value="modelStateRef.name"
              placeholder="请输入部门名称"
            />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="显示顺序">
            <Input
              v-model:value="modelStateRef.sort"
              placeholder="请输入显示顺序"
            />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="负责人">
            <Input
              v-model:value="modelStateRef.username"
              placeholder="请输入负责人"
            />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="联系电话">
            <Input
              v-model:value="modelStateRef.phone"
              placeholder="请输入联系电话"
            />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="邮箱">
            <Input
              v-model:value="modelStateRef.email"
              placeholder="请输入邮箱"
            />
          </FormItem>
        </Col>
        <Col :span="24">
          <FormItem label="组织状态">
            <RadioGroup
              v-model:value="modelStateRef.status"
              button-style="solid"
            >
              <RadioButton value="1">开启</RadioButton>
              <RadioButton value="2">关闭</RadioButton>
            </RadioGroup>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <template #footer>
      <div class="text-right">
        <Button style="margin-right: 8px" @click="onClose">关闭</Button>
        <Button type="primary" @click="onSubmit">提交</Button>
      </div>
    </template>
  </Drawer>
</template>

<style scoped></style>
